<%-- 
    Document   : V_Hallazgo_Update
    Created on : 07-sep-2014, 9:13:33
    Author     : JoseHernan
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>XSIS v1.0 - Expert System for Information Security</title>
        <link rel="stylesheet" href="../css/metro-bootstrap.css">
        <link rel="stylesheet" href="../css/metro-bootstrap-responsive.css">
        <link rel="stylesheet" href="../css/iconFont.css">
        <script src="../js/jquery/jquery.min.js"></script>
        <script src="../js/jquery/jquery.widget.min.js"></script>
        <script src="../js/jquery/jquery.mousewheel.js"></script>
        <script src="../js/metro/metro.min.js"></script>
        <script src="../js/metro/metro-dropdown.js"></script>
        <script src="../js/metro/metro-hint.js"></script>
        <script src="../js/metro/metro-calendar.js"></script>
        <script src="../js/metro/metro-datepicker.js"></script>
        <script src="../js/metro/metro-tab-control.js"></script>
        <script src="../js/metro/metro-dialog.js"></script>
        <script src="../js/metro/metro-table.js"></script>
    </head>
    <body class="metro">
        <header class="bg-dark" data-load="header.html">
            <div class="navigation-bar">
                <nav class="navigation-bar-content container">
                    <item class="element" data-hint="XSIS v1.0 | Expert System for Information Security"><i class="icon-star-3"></i><strong> XSIS <sup>1.0</sup></strong></item>
                    <item class="element-divider"></item>

                    <button class="element image-button image-left place-right">
                        Sergey Pimenov
                        <img src="images/me.jpg">
                    </button>
                </nav>
            </div>
        </header>
        <div class="grid container">
            <div class="row">
                <div class="span4">
                    <!--Inicio Menú de Opciones-->
                    <nav class="sidebar light">
                        <ul>
                            <li class="title">Auditoría</li>
                            <li class="active"><a href="#"><i class="icon-folder"></i> Registrar Evidencias</a></li>
                            <li class=""><a href="#"><i class="icon-home"></i>Dashboard</a></li>
                            <li><a href="#"><i class="icon-cog"></i>Layouts</a></li>
                            <li>
                                <a class="dropdown-toggle" href="#"><i class="icon-tree-view"></i>Mantener Equipo de trabajo</a>
                                <ul class="dropdown-menu" data-role="dropdown">
                                    <li><a href="">Designar auditor Jefe</a></li>
                                    <li class="divider"></li> 
                                    <li><a href="">Registro de Auditor Jefe</a></li>
                                    <li><a href="">Registro de equipo de Trabajo</a></li>         
                                </ul>
                            </li>
                            <li class="title"><i class="icon-cog"></i>Configuración</li>
                            <li><a href="#">Personalizar el Sistema</a></li>
                            <li><a href="#">Registrar datos de la empresa</a></li>
                            <li><a href="#">Registrar auditoría</a></li>
                            <li><a href="#">Crear Entorno auditado</a></li>
                            <li><a href="#">Mantener activo de información</a></li>
                            <li><a href="#">Mantener tipo de activo de información</a></li>
                        </ul>
                    </nav>
                    <!--Fin Menú de Opciones-->
                </div>
                
                <div class="span10">
                    <!--Inicio de Cuerpo-->
                    <div class="tab-control" data-role="tab-control" data-effect="fade">
                        <ul class="tabs">
                            <li class="active"><a href="#_page_1">Hallazgo</a></li>
                            <li><a href="#_page_2">Evidencias</a></li>
                        </ul>

                        <div class="frames">
                            <div class="frame" id="_page_1">
                                <div class="panel">
                                    <div class="panel-header bg-lightBlue fg-white">
                                        <i class="icon-folder"></i> Registrar Hallazgo
                                    </div>
                                    <div class="panel-content">
                                        <form action="">
                                            <label>Título</label>
                                            <input type="text" class="size5" />
                                            <label>Descripción</label>
                                            <textarea class="size5" rows="5" ></textarea>
                                            <label>Fecha</label>
                                            <div class="input-control text" id="datepicker" style="width:380px">
                                                <input type="text">
                                                <button class="btn-date"></button>
                                            </div>

                                            <script>
                                                $("#datepicker").datepicker({
                                                    format: "dd/mm/yyyy", // set output format
                                                    effect: "fade", // none, slide, fade
                                                    position: "bottom", // top or bottom,
                                                    dayNames: [ "Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado" ],
                                                    dayNamesMin: [ "Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sá" ],
                                                    dayNamesShort: [ "Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam" ],
                                                    defaultDate: 1,
                                                    minDate: new Date()
                                                });
                                            </script>
                                            <br><br>
                                            <button class="bg-lightBlue fg-white">Guardar</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <div class="frame" id="_page_2">
                                <div class="panel" >
                                    <div class="panel-header bg-lightBlue fg-white">
                                        <i class="icon-folder"></i> Lista de Evidencias
                                    </div>
                                    <div class="panel-content">
                                        <button class="button" id="createWindowDraggable">Agregar Evidencia</button><br><br>
                                        <table class="table bordered hovered">
                                            <thead>
                                                <tr>
                                                    <th>Título</th>
                                                    <th>Descripción</th>
                                                    <th>Fecha</th>
                                                    <th>Evidencia</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>título 1</td>
                                                    <td>título 2</td>
                                                    <td>título 2</td>
                                                    <td><a href="#">Archivo Adjunto</a></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <script>
                                            $("#createWindowDraggable").on('click', function(){
                                                $.Dialog({
                                                    shadow: true,
                                                    overlay: false,
                                                    draggable: true,
                                                    icon: '<span class="icon-bus"></span>',
                                                    title: 'Draggable window',
                                                    width: 500,
                                                    padding: 10,
                                                    content: 'This Window is draggable by caption.',
                                                    onShow: function(){
                                                        var content = '<form id="login-form-1">' +
                                                                '<label>Título</label>'+
                                                                '<input type="text" class="size5" />'+
                                                                '<label>Descripción</label>'+
                                                                '<textarea class="size5" rows="5" ></textarea>'+
                                                                '<label>Evidencia</label>'+
                                                                '<div class="input-control file">'+
                                                                    '<input type="file" />'+
                                                                    '<button class="btn-file"></button>'+
                                                                '</div>'+
                                                                '<label>Fecha</label>'+
                                                                '<div class="input-control text" id="datepicker2" width="200">'+
                                                                    '<input type="text">'+
                                                                    '<button class="btn-date"></button>'+
                                                                '</div>'+
                                                                '<br><br>'+
                                                                '<button class="bg-lightBlue fg-white">Guardar</button>'+
                                                                '</form>';                                               

                                                        $.Dialog.title("Registrar Evidencia");
                                                        $.Dialog.content(content);
                                                    }

                                                });
                                            });
                                            $("#datepicker2").datepicker({
                                        format: "dd/mm/yyyy", // set output format
                                        effect: "fade", // none, slide, fade
                                        position: "bottom", // top or bottom,
                                        dayNames: [ "Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado" ],
                                        dayNamesMin: [ "Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sá" ],
                                        dayNamesShort: [ "Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam" ],
                                        defaultDate: 1,
                                        minDate: new Date()
                                    });
                                        </script>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        
                    </div>
                    <!--Fin de Cuerpo-->
                </div>
                
            </div>
        </div>
    </body>
</html>
